<template>
	<view class="queue">
		<uni-section title="排队取号" type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar height="150rpx" left-icon="left" title="排队取号" @clickLeft="back" />
			</view>
		</uni-section>
		<view class="name" v-for="(v,index) in list" :key="v.id" v-if="index<1">
			<view class="name1">
				<view>{{v.name}}</view>
				<view>1.2km 上海市静安区江场三路134号</view>
			</view>
			<view class="name2">
				<view>
					<image
						src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u637.png">
					</image>
				</view>
			</view>
			<view class="name3">
				<view>
					<image
						src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u640.png">
					</image>
				</view>
			</view>
		</view>
		<view class="await">
			<view class="title">
				<view>餐桌类型</view>
				<view>等待桌数</view>
				<view>预计等待</view>

			</view>
			<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u664.png">
			</image>
			<view class="await1" v-for="v in list" :key="v.id">
				<view>
					<view>{{v.type}}</view><text>{{v.peo}}</text>
				</view>
				<view>
					<view>{{v.awaitNum}}</view><text>桌</text>
				</view>
				<view>
					<view>{{v.awaitTime}}</view><text>分钟</text>
				</view>
			</view>
			<!-- <view class="await1">
				<view>
					<view>中桌</view><text>(3-4人)</text>
				</view>
				<view>
					<view>10</view><text>桌</text>
				</view>
				<view>
					<view>10</view><text>分钟</text>
				</view>
			</view>
			<view class="await1">
				<view>
					<view>大桌</view><text>(5-6人)</text>
				</view>
				<view>
					<view>11</view><text>桌</text>
				</view>
				<view>
					<view>12</view><text>分钟</text>
				</view>
			</view>
			<view class="await1">
				<view>
					<view>特大桌</view><text>(7-8人)</text>
				</view>
				<view>
					<view>6</view><text>桌</text>
				</view>
				<view>
					<view>6</view><text>分钟</text>
				</view>
			</view>
			<view class="await1">
				<view>
					<view>包间</view><text>(9-12人)</text>
				</view>
				<view>
					<view>2</view><text>桌</text>
				</view>
				<view>
					<view>3</view><text>分钟</text>
				</view>
			</view> -->
		</view>
		<view class="bo">
			<!-- <navigator url="../messagePho/messagePho" open-type="navigate"> -->
				<button v-model="id" @click="confirm(id)" class="bottom">下一步</button>
			<!-- </navigator> -->
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				id: 1,
				list: []
			}
		},
		methods: {
			confirm(key) {
				console.log('key='+key);
				uni.navigateTo({
					url: '/pages/messagePho/messagePho?id='+key
				})
			},
			back() {
				
				uni.navigateBack({
					delta: 1
				})
			}
		},

		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			if (option.id != undefined) {
				console.log(option.id); //打印出上个页面传递的参数。
				this.id = option.id;
				console.log('this.id:' + this.id);
				// console.log(option.name); //打印出上个页面传递的参数。
			}else{
				console.log('默认id=1');
			}
		},
		onShow() {
			http({
				url: '/takeNum',
				method: 'post',
				data: {
					id: this.id
				},
				success: (res) => {
					console.log(res.data);
					//console.log(this.list);
					this.list = res.data;
					// console.log(this.list)
					console.log('11111111');
				}
			})
		}
	}
</script>

<style>
	.bottom {
		background-color: #f77214;
		color: #fff;
		border-radius: 50rpx;
		margin: 20rpx;
	}

	.bo {
		position: absolute;
		width: 750rpx;
		/* height: 200rpx; */
		background-color: #fff;
		bottom: 0rpx;
	}

	.await1 {
		display: flex;
		/* justify-content: center; */
		align-items: center;
		justify-content: space-around;
	}

	.await1 view {
		display: flex;
		align-items: center;
		padding: 5rpx;
	}

	.await1>view text {
		color: #bebebe;
		font-size: 25rpx;
	}

	.await1>view:nth-child(2) view {
		color: #f77214;
	}

	.title {
		display: flex;
		/* justify-content: center; */
		justify-content: space-around;
		align-items: center;
	}

	.title view {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 5rpx;
		font-size: 25rpx;
	}

	.await image {
		width: 600rpx;
		height: 5rpx;
		margin-left: 40rpx;
	}

	.await {
		/* display: flex; */
		background-color: #fff;
		/* margin: 30rpx; */
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
	}

	.queue {
		padding-bottom: 500rpx;
		background-color: rgba(245, 247, 247, 1);
	}

	.name {
		display: flex;
		padding: 15rpx;
		margin: 30rpx;
		margin-bottom: 50rpx;
		border: 2rpx solid #eee;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.name1 {
		flex: 5;
	}

	.name1 view:nth-child(1) {
		padding-top: 15rpx;
	}

	.name1 view:nth-child(2) {
		color: #d1d1d1;
		font-size: 25rpx;
		padding: 15rpx;
	}

	.name2 {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.name2 view {
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(247, 114, 20, 0.0980392156862745);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.name2>view image {
		width: 30rpx;
		height: 30rpx;
	}

	.name3 {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.name3 view {
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(247, 114, 20, 0.0980392156862745);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.name3>view image {
		width: 30rpx;
		height: 30rpx;
	}
</style>
